<script setup>
import { ArrowRight, CircleCloseFilled, Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  modelValue: Boolean,
  title: String,
  list: {
    type: Array,
    default: () => [],
  },
  props: Object,
})
const emit = defineEmits(['update:modelValue', 'submit'])

const opt = reactive(
  Object.assign(
    {
      id: 'id',
      label: 'label',
      children: 'children',
      disabled: 'disabled',
      indeterminate: 'indeterminate',
      checked: 'checked',
    },
    props.props
  )
)

const searchValue = ref('')

// 选中的人员
const selectList = ref([])

const treeRef = ref()

watch(searchValue, (v) => {
  treeRef.value.filter(v)
})

function filter(value, data) {
  return data[opt.label].includes(value)
}

function checked(node, value) {
  node.data.checked = value === undefined ? !node.data.checked : value
  if (node.data.children) {
    node.childNodes.forEach((i) => {
      if (!i.data.disabled) {
        checked(i, node.data.checked)
      }
    })
  } else {
    if (node.data.checked && selectList.value.every((i) => i[opt.id] !== node.data[opt.id])) {
      selectList.value.push(node.data)
    }
    if (!node.data.checked) {
      const index = selectList.value.findIndex((i) => i[opt.id] === node.data[opt.id])
      selectList.value.splice(index, 1)
    }
  }
  if (node.parent.childNodes.every((i) => i.data.checked)) {
    node.parent.data.checked = true
    node.parent.data.indeterminate = false
  } else if (node.parent.childNodes.every((i) => !i.data.checked)) {
    node.parent.data.checked = false
    node.parent.data.indeterminate = false
  } else {
    node.parent.data.indeterminate = true
  }
}

function submit() {
  if (selectList.value.length !== 0) {
    emit('submit', JSON.parse(JSON.stringify(selectList.value)))
  } else {
    ElMessage.warning('请选择人员')
  }
}

function deselect(data) {
  checked(treeRef.value.getNode(data), false)
}

function close() {
  searchValue.value = ''
  selectList.value = []
  emit('update:modelValue', false)
}
</script>

<template>
  <TaskChatDialog
    :model-value="props.modelValue"
    class="custom-selection"
    :title="props.title"
    width="700px"
    append-to-body
    :close-on-click-modal="false"
    @close="close">
    <el-input v-model="searchValue" :prefix-icon="Search" clearable></el-input>
    <div class="custom-selection-body">
      <div class="user-list">
        <el-tree ref="treeRef" :data="props.list" :node-key="opt.id" :icon="ArrowRight" :filter-node-method="filter">
          <template #default="{ node, data }">
            <div class="node-content">
              <el-checkbox
                :model-value="data.checked"
                :indeterminate="data.indeterminate"
                :disabled="data.disabled"
                style="margin-right: 5px"
                @click.stop
                @change="checked(node, $event)"></el-checkbox>
              <slot :node="node" :data="data">
                <span>{{ data[opt.label] }}</span>
              </slot>
            </div>
          </template>
        </el-tree>
      </div>
      <div class="selected-user-list">
        <div style="font-weight: bold; font-size: 16px">
          已选择
          {{ selectList.length }}
          人
        </div>
        <div class="user" v-for="item in selectList" :key="item[opt.id]">
          <span>{{ item[opt.label] }}</span>
          <el-icon v-if="!item.disabled" size="16" @click="deselect(item[opt.id])" style="cursor: pointer">
            <CircleCloseFilled></CircleCloseFilled>
          </el-icon>
        </div>
      </div>
    </div>
    <template #footer>
      <el-button @click="emit('update:modelValue', false)">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </template>
  </TaskChatDialog>
</template>

<style scoped lang="scss">
.custom-selection {
  .custom-selection-body {
    @include use-flex();
    height: 400px;
    padding: 15px 0;
    .user-list {
      flex: 1;
      padding: 0 10px;
      border-right: var(--elp-border);
      overflow: hidden auto;
      .organization-img {
        width: 10px;
        height: 10px;
      }
      .node-content {
        @include use-flex(center);
      }
      .el-tree {
        --elp-tree-node-content-height: auto;
      }
    }
    .selected-user-list {
      flex: 1;
      padding: 0 10px;
      overflow-y: auto;
      .user {
        display: inline-flex;
        align-items: center;
        font-size: 12px;
        color: #0d53ff;
        border-radius: 4px;
        padding: 4px 8px;
        border: 1px solid #0d53ff;
        margin-right: 10px;
        margin-top: 5px;
        background: rgba(13, 83, 255, 0.1);
      }
    }
  }
}
:deep(.elp-tree-node__content) {
  height: 45px !important;
}
</style>
